<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function doId(){
                //根据id的值查找对应的元素的DOM对象(单个对象)
                // （id的值需要唯一，因为根据id查找，查找的是第一个符合的DOM对象）
                var mydiv=document.getElementById("mydiv");
                console.log(mydiv);
            }
            function doName(){
                //根据name的属性值获取对应元素的DOM对象的集合
                var hobbies=document.getElementsByName("hobby");
                console.log(hobbies);//集合
                console.log(hobbies[0]);
                console.log(hobbies[1]);
                console.log(hobbies[2]);

            }
            function doTagName(){
                // 根据标签名查找元素的DOM对象的集合
                var inputs=document.getElementsByTagName("input");
                console.log(inputs);//集合
                for(var i=0;i<inputs.length;i++){
                    console.log(inputs[i]);
                }
            }

            function doSelector(){
                // 根据选择器获取匹配的第一个DOM对象
                // var div=document.querySelector("#mydiv");
                // var div=document.querySelector(".haha");
                // var div=document.querySelector("div");
                var div=document.querySelector("input[name='hobby']");
                console.log(div);
            }

            function doSelectorAll(){
                // 根据选择器获取匹配的DOM对象的集合
                // var divs=document.querySelectorAll("div");
                var divs=document.querySelectorAll("#mydiv");
                console.log(divs);
            }
        </script>
    </head>
    <body>
        <input type="button" value="根据id的值查找DOM对象" onclick="doId()">
        <input type="button" value="根据name的值查找DOM对象的集合" onclick="doName()" >
        <input type="button" value="根据标签名查找元素的DOM对象的集合" onclick="doTagName()">
        <input type="button" value="根据选择器进行查询DOM对象" onclick="doSelector()">
        <input type="button" value="根据选择器进行查询DOM对象的集合" onclick="doSelectorAll()">
        <div id="mydiv">mydiv</div>
        <div id="mydiv2">mydiv2</div>
        <div class="haha">哈哈哈</div>
        <div class="haha">哈哈哈哈</div>
        爱好:
        <input type="checkbox" name="hobby" value="吃饭">吃饭
        <input type="checkbox" name="hobby" value="睡觉">睡觉
        <input type="checkbox" name="hobby" value="打豆豆">打豆豆
    </body>
</html>